<template>
	<view class="dmm-container dmm-container-grey">
		<u-cell-group>
			<u-cell v-for="(item, index) in balanceRecords.list" :key="index" :title="item.businessTypeName" :label="item.createdTime">
				<view class="u-cell__value" slot="value">
					<text class="text text-primary text-lg text-b">{{(item.businessType === '2' || item.businessType === '3') ? '-' : ''}}{{item.detailAmt | toFixed2}}</text>
					<text class="text text-tip text-sm">{{item.orderStateName}}</text>
				</view>
			</u-cell>
		</u-cell-group>
		
		<div class="dmm-space"></div>
		<view v-if="!balanceRecords.hasData" class="tip">
			<text class="text text-tip">- 没有数据了 -</text>
		</view>
	</view>
</template>

<script>
	import { mapState, mapActions } from "vuex"
	
	export default {
		data() {
			return {
				
			}
		},
		
		computed: {
			...mapState('income', ['balanceRecords'])
		},
		
		methods: {
			...mapActions('income', ['getBalanceRecords'])
		},
		
		created() {
			this.getBalanceRecords()
		},
		
		onReachBottom() {
			if (this.balanceRecords.hasData) this.getBalanceRecords({pageNum: this.balanceRecords.pageNum + 1})
		}
	}
</script>

<style lang="scss">
	.dmm-container {
		padding-bottom: 40rpx;
		box-sizing: border-box;
	}
	
	.u-cell-group {
		background-color: #fff;
		
		.u-cell__value {
			display: flex;
			flex-direction: column;
			text {
				margin: 8rpx 0 8rpx;
			}
		}
	}
	
	.tip {
		text-align: center;
	}
</style>
